<template>
    <div class="header">
        <div>
            <el-row>
                <el-col :span="4">
                    <div class="logo" @click="$router.push('./homePageIndex')">
                        <img src="http://www.imooc.com/static/img/index/logo_new.png" alt="">
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="group">
                        <el-button type="text" @click="$router.push('./allVideo')">课程</el-button>
                        <el-input type="text" icon="search" placeholder="课程名称"></el-input>
                        <el-button type="primary" @click="$router.push('./search')">搜索</el-button>
                    </div>
                </el-col>
                <el-col :span="7">
                    <div class="shoppingCartBox">
                        <div class="shoppingCart"
                             @mouseover="cartShow = true"
                             @mouseleave="mouseleave">
                            购物车 <span>0</span>
                        </div>
                        <div v-if="cartShow" @mouseenter="show1 = true;" @mouseleave="cartShowmMouseleave"  class="my-cart" >
                            <div class="cart-title-box clearfix">
                                <el-row>
                                    <el-col :span="12">
                                        <div>
                                            我的购物车
                                        </div>
                                    </el-col>
                                    <el-col :span="12">
                                    <div style="float:right">
                                        已加入 0 门课程
                                    </div>
                                    </el-col>
                                </el-row>  
                            </div>                                   
                             <div class="cart-wrap">   
                                <!-- 没有选择课程 -->
                                <div style="display: none;">
                                    <div class="clear-cart">                                           
                                        <span class="cartIcon icon-shopping-cart"></span>           
                                        <h3>购物车里空空如也</h3>                                            
                                        <div class="text">快去这里选购你中意的课程</div>  
                                        <p>
                                            <a class="cursor" style="text-decoration: none;color:red;font-size:12px;" @click="$router.push('/homePage/allVideo')" >实战课程</a>
                                        </p>  
                                    </div>
                                </div>
                                <!-- 选择课程 -->
                                <div class="cart-wrap-box">
                                    <ul>
                                        <li class="clearfix js-item">
                                            <a class="cursor" target="_blank" :href="handleAudit('A')">
                                                <img class="l" src="http://img.mukewang.com/szimg/5909a1250001197e05400300-160-90.jpg"
                                                >
                                            </a>
                                            <div class="content-box l">                                
                                                <a target="_blank">
                                                    <h3>BAT大咖助力 全面升级Android面试</h3>
                                                </a>                         
                                                <p class="clearfix">                                    
                                                    <span class="price l">￥288</span>
                                                    <span  class="del r js-close cursor" @click="deleted">删除</span>
                                                </p>
                                            </div>                        
                                        </li>
                                    </ul>
                                </div>

                                <div class="more-box">
                                    <el-row>
                                        <el-col :span="12">
                                            <div style="line-height:40px;cursor:pointer;" @click="$router.push('/homePage/myorder')"> 我的订单中心</div>
                                        </el-col>
                                        <el-col :span="12">
                                          <el-button style="float:right" type="danger">去购物车</el-button>
                                        </el-col>
                                    </el-row>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="3">
                    <div>
                        <div class="myMsg" 
                            @mouseenter="isShowMyMsgBox = true"
                            @mouseleave="myMsgMouseleave" 
                            >
                            <span>
                                <img src="../../assets/img/img.jpg" alt="">
                            </span>
                            <span>狗仔队</span>
                        </div>
                    </div>
                    <div v-if="isShowMyMsgBox" class="myMsgBox" @mouseenter="isShowMyMsgBox1 = true" @mouseleave="cartShowmMouseleave" >
                        <div class="name">
                            <h3>农村小伙子</h3>
                            <div><span>经验 10000</span></div>
                        </div>
                        <div class="orderCenter">
                            <el-row>
                                <el-col :span="12">
                                    <div>
                                        <span @click="$router.push('/homePage/myVourse')">我的课程</span>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div style="margin-left:3px;">
                                        <span @click="$router.push('/homePage/myorder')">订单中心</span>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <div>
                                        <span @click="$router.push('/homePage/user')">个人设置</span>
                                    </div>
                                </el-col>
                            </el-row>
                        </div>
                
                        <div style="clear:both; border-top: 1px solid #edf1f2;">
                            <el-button style="font-size:12px;color:#93999F;" type="text" @click="$router.push('/')">安全退出</el-button>
                        </div>
                    </div>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'header',
        data(){
            return {
                cartShow:false,
                show1: false,
                isShowMyMsgBox: false,
                isShowMyMsgBox1: false,
            }
        },
        methods: {
            handleAudit(a){
                return `#/homePage/videoPlay`;
            },
            deleted(){
                alert('这里是删除的方法')
            },
            mouseleave(){
                var that = this;
                setTimeout(function(){
                    if(that.show1 == true){
                        that.cartShow = true;
                    }else{
                        that.cartShow = false;
                    }
                },300)
            },
            cartShowmMouseleave(){
                this.show1 = false;
                this.cartShow = false;
                this.isShowMyMsgBox = false;
                this.isShowMyMsgBox1 = false;

            },
            myMsgMouseleave(){
                var that = this;
                setTimeout(function(){
                    if(that.isShowMyMsgBox1 == true){
                        that.isShowMyMsgBox = true;
                    }else{
                        that.isShowMyMsgBox = false;
                    }
                },300)
            },
        }
    }
</script>

<style lang="less">
    .header{
        width:100%;
        position: fixed;
        top:0;
        left:0;
        height: 72px;
        box-shadow: 0 4px 8px 0 rgba(7,17,27,.1);
        z-index:9;
        background:#fff;
        
        .myMsgBox{
            padding:0 12px;
            position: absolute;
            top:72px;
            right: 0;
            background: #fff;
            width: 300px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
            box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.2);
            .name{
                margin-top: 30px;
                text-align: center;
                span{
                    font-size: 12px;
                }
            }
            .orderCenter{
                margin-top: 30px;
                text-align: center;
                padding-bottom: 10px;
                min-height: 150px;
                >div{
                    margin-bottom: 3px;
                }
                span{
                    color: #4d555d;
                    background: #edeff1;
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    cursor: pointer;
                }
            }
        }


    


        .logo{
            cursor: pointer;
            padding-left: 25px;
            display: block;
            width: 126px;
            height: 72px;
            background: 0 0!important;
            text-indent: 0!important;
            img{
                width: 126px;
            }
        }
        .group{
            .el-button--text{
                padding: 0 20px;
                color: #4D555D;
                font-size: 16px;
                line-height: 72px;
                -webkit-transition: background-color .3s;
                -moz-transition: background-color .3s;
                transition: background-color .3s;
                :hover{
                    color:#000;
                }
            }
            .el-input{
                display: inline-block;
                width:200px;
                margin-left: 50px;
            }
            .el-input__inner:focus{
                border-color:#bfcbd9;
            }
        }
        .myMsg{
            cursor:pointer;
            float: right;
            padding-right:15px;
            span{
                float: left;
                line-height: 72px;
                margin-right: 10px;
            }
            img{
                display: inline-block;
                width: 40px;
                border-radius: 50%;
                float: left;
                margin-top: 16px;
            }
        }
        .el-button--primary:active {
            background: #253040;
            border-color: #253040;
            color: #fff;
        }
        .el-button--primary{
            background: #334258;
            border-color: #334258;
        }
        .shoppingCart{
            cursor: pointer;
            border:1px #383737 solid;
            width: 90px;
            height: 30px;
            background: #344359;
            color:#fefefe;
            border-radius: 30px;
            text-align: center;
            line-height: 30px;
            margin-top: 20px;
            float: right;
            span{
                display: inline-block;
                width: 20px;
                background:#f01414;
                line-height: 20px;
                border-radius: 50%;
                font-size: 12px;
                margin-left: 5px;
            }
        }
        .my-cart {
            background: #fff;
            padding: 0 12px;
            position: absolute;
            top: 72px;
            width: 350px;
            right: 200px;
            border-bottom-right-radius: 8px;
            border-bottom-left-radius: 8px;
            box-shadow: 0 8px 16px 0 rgba(7, 17, 27, 0.2);

        }
        .my-cart .cart-title-box {
            border-bottom: 1px solid #d9dde1;
        }
        .my-cart .cart-title-box h2 {
            height: 16px;
            font-size: 16px;
            color: #07111b;
            line-height: 16px;
        }
        .my-cart .cart-title-box h5 {
            height: 16px;
            line-height: 16px;
            font-size: 12px;
            color: #93999f;
        }
        .my-cart .cart-wrap .clear-cart {
            height: 284px;
            text-align: center;
            margin-top: 0 auto;
        }
        .my-cart .cart-wrap .clear-cart .cartIcon {
            margin-top: 36px;
            margin-bottom: 12px;
            display: inline-block;
            width: 60px;
            height: 60px;
            line-height: 60px;
            background: #93999f;
            font-size: 36px;
            color: #fff;
            border-radius: 50%;
        }
        .my-cart .cart-wrap .clear-cart h3 {
            margin: 0 auto;
            width: 180px;
            padding-bottom: 24px;
            border-bottom: 1px solid #d9dde1;
            color: #4d555d;
            font-size: 14px;
            line-height: 14px;
        }
        .my-cart .cart-wrap .clear-cart .text {
            text-align: center;
            margin-top: 24px;
            margin-bottom: 16px;
            font-size: 12px;
            line-height: 12px;
            color: #93999f;
        }
        .my-cart .cart-wrap .clear-cart .go-link {
            display: block;
            color: rgba(240,20,20,.6);
            font-size: 12px;
            line-height: 12px;
            margin-bottom: 16px;
        }
        .my-cart .more-box {
            padding: 16px 12px;
            border-top: 1px solid #d9dde1;
        }
        .my-cart .more-box .show-box {
            height: 38px;
            line-height: 38px;
        }
        .l {
            float: left;
        }
        .my-cart .more-box .go-cart {
            color: #fff;
            font-size: 12px;
            line-height: 12px;
            font-weight: 700;
            padding: 12px 16px;
            background: rgba(240,20,20,.8);
            border-radius: 16px;
        }
        .clearfix{
            height: 40px;
            line-height: 40px;
            color:#666;
        }
        .cart-wrap-box{
            margin:0;
        }
        .my-cart .cart-wrap .cart-wrap-box ul {
            overflow: hidden;
            width: 100%;
            margin-bottom: 100px;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li img {
            width: 100px;
            height: 56px;
            margin-right: 12px;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li .content-box h3 {
            word-break: break-word;
            font-size: 12px;
            color: #07111b;
            line-height: 16px;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li {
            padding: 12px 12px 8px 12px;
            box-sizing: border-box;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li a {
            width: auto;
            height: auto;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li .content-box {
            width: 170px;
        }
        .my-cart .cart-wrap .cart-wrap-box ul li .content-box p {
            height: 12px;
            font-size: 12px;
            .price{
                color:red;
            }
            .js-close{
                float: right;
                color:red;
            }
        }
        
        



    }
</style>
